<template>
  <el-drawer
    title="功能配置"
    :visible="functionConfigDialog"
    direction="rtl"
    :before-close="handleClose"
    custom-class="demo-drawer"
    size="50%"
  >
    <div class="app-container" v-loading="loading">
      <!-- 未启用板块 -->
      <div class="title">未启用</div>
      <div class="app-div">
        <el-card class="app-hover" v-for="item in closeList">
          <div class="app-item-name">
            <div style="font-size: 17px">{{ item.name }}</div>
            <div v-if="!item.openTime" class="app-item-new">NEW</div>
          </div>
          <div class="app-item-text">
            <div class="app-item-desc">
              {{ item.funcDesc }}
            </div>
            <el-button size="mini" @click="changeStatus(item)">
              启用
            </el-button>
          </div>
        </el-card>
        <span style="color: gray" v-if="closeList.length === 0">
          暂无未启用的功能
        </span>
      </div>
      <!-- 已启用列表 -->
      <div class="title">已启用</div>
      <div class="app-div">
        <el-card class="app-hover" v-for="item in openList">
          <div class="app-item-name">
            <div style="font-size: 17px">{{ item.name }}</div>
            <div v-if="!item.openTime" class="app-item-new">NEW</div>
          </div>
          <div class="app-item-text">
            <div class="app-item-desc">
              {{ item.funcDesc }}
            </div>
            <el-button size="mini" @click="changeStatus(item)">
              停用
            </el-button>
          </div>
        </el-card>
      </div>
      <span style="color: gray" v-if="openList.length === 0">
        暂无启用的功能
      </span>
    </div>
  </el-drawer>
</template>

<script>
import { reportUpdate, reportList } from "@/api/system/configuration";
export default {
  name: "Station_functional_config",
  props: {
    functionConfigDialog: {
      type: Boolean,
      default: false,
    },
    currentRowdata: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      closeList: [],
      openList: [],
      loading: false,
    };
  },
  watch: {
    functionConfigDialog(val) {
      if (val) {
        this.getList();
      }
    },
  },

  methods: {
    // 查询报表功能配置列表
    async getList() {
      this.loading = true;
      this.closeList = [];
      this.openList = [];
      const res = await reportList({ userId: this.currentRowdata.userId });
      if (res.data && res.data.length) {
        res.data.forEach((item) => {
          item.status !== 1
            ? this.closeList.unshift(item)
            : this.openList.unshift(item);
        });
      } else {
        this.openList = [];
        this.closeList = [];
      }
      this.loading = false;
    },

    // 修改查询报表功能配置列表
    changeStatus(item) {
      let status = item.status === 1 ? 0 : 1;
      let tip = item.status === 1 ? "停用" : "启用";
      this.$confirm(`确认${tip} ${item.name} 吗`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const params = {
          id: item.id,
          status: status,
          userId: this.currentRowdata.userId,
        };
        await reportUpdate(params);
        this.getList();
        this.$message.success(res.msg);
      });
    },

    handleClose() {
      this.$emit("update:functionConfigDialog", false);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .demo-drawer {
  overflow-y: auto;
  .el-drawer__header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
  }

  .el-drawer__body {
    .app-container {
      .title {
        font-size: 24px;
        font-weight: 500;
      }

      // 卡片列表的容器
      .app-div {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
        .app-hover {
          box-shadow: 3px 3px 4px rgba(185, 185, 185, 0.5);
          margin: 10px;
          width: 310px;
          height: 130px;
          &:hover {
            box-shadow: 4px 4px 8px rgba(185, 185, 185, 0.5);
            transform: scale(1.04);
          }
          .app-item-name {
            display: flex;
            margin-bottom: 8px;
          }
          .app-item-new {
            border-radius: 12px;
            margin-left: 10px;
            height: 24px;
            line-height: 20px;
            font-size: 12px;
            background-color: rgb(221, 88, 88);
            padding: 2px 10px;
            color: #fff;
          }
          .app-item-text {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            .app-item-desc {
              font-size: 14px;
              color: #9e9e9e;
              padding-right: 5px;
            }

            .el-button {
              height: 30px;
              margin-top: 5px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
